<template>
	<view class="city">
		<view class="city_item flex1">
			<!-- 左侧滑动导航栏 -->
			<view class="city_item_left color81">
				<scroll-view :scroll-y="true" style="height:calc(100vh - 88rpx);">
					<!-- <view :class="indexsp == 'hot' ? 'active' : ''" @tap="setProvince" data-index="hot">
						常见&热门
					</view> -->
					<view :class="indexsp == item.cityId ? 'active' : ''" v-for="(item,index) in province"
						@tap="setProvince(item.cityId)" :data-index="index">{{item.cityName}}</view>
				</scroll-view>
			</view>
			<!-- 右侧选择导航栏 -->
			<view class="city_item_right">
				<!-- 选中城市展示 -->
				<view class="current">
					<text class="hot_title">当前选择城市:</text>
					<view class="flex1">
						<!-- <imgParts url="../../static/icon/address.png" class="icon" width="25" height="30" /> -->
						<view>
							<text v-for="(item,index) in current" @click="setCity(item)">{{item.cityName}}{{index != (current.length-1) ? '、' : ''}}</text>
						</view>
					</view>
				</view>
				<!-- 城市选项展示 -->
				<view>
					<!-- 热门城市选项 -->
					<view class="hot" v-if="indexsp == 'hot'">
						<!-- button v-for="(item,index) in hotlist" v-if="item.name != '其他城市'"
							:class="indexOfs(current,item.name) ? 'active' : ''"
							@tap="setCity(item.name)">{{item.name}}</button> -->
					</view>
					<!-- 城市选项 -->
					<view class="hot" v-else>
						<!-- 根据侧边导航选项索引决定右侧渲染的城市数据 -->
						<button v-for="(item,index) in city" @tap="setCity(item)"
							:class="indexOfs(current,item) ? 'active' : ''">{{item.cityName}}</button>
					</view>
					<!-- 确认按钮 -->
					<button class="submit f08btn" @tap="back">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findCityByParentId
	} from '@/api/city.js'
	// 导入省市数据
	// 导入热门城市数据
	// import hotData from '@/json/cityData.js'
	import { setTabBarCity } from '../../common/common.js'
	export default {
		data() {
			return {
				// 省市数据
				province: [],
				// 侧边导航选项索引
				indexsp: 'hot',
				// 选中城市数组
				current: [],
				// 热门城市数据
				// hotlist: hotData
				city:[]
			};
		},
		onLoad(options) {
			// 将页面传递过来的数据使用"|"符号分割开,存储到变量current中
			this.current = options && options.city ? [options.city] : [];
			
			findCityByParentId({parentId:'1'}).then(res=>{
				this.province = res.data.data
			})
			
		},
		methods: {
			indexOfs(list, name) {
				return list.indexOf(name) != -1;
			},
			setCity(city) {// city 当前点击的城市
				
				let that = this;
				// 选中的城市数组
				let current = that.current;
				// 将当前点击城市在选中城市数组中检索,将结果赋值给变量index
				let index = current.indexOf(city);
				
				if (index != -1) {//index不等于-1代表选中数组中已有当前点击城市
					//从返回的城市数组位置进行删除一个元素
					that.current.splice(index, 1)
					
				} else if (current.length < 4) {// 当选中的城市数少于4个时
					// 将当前点击城市push进选中城市数组
					that.current = [city];
				} 
			},
			// 确定按钮触发函数
			back() {
				// console.log(this.current)
				if(this.current.length){
					getApp().globalData.city = this.current[0]
					uni.setStorageSync('chooseCity',true)
				}
				// 返回上一个页面
				setTimeout(()=>{
					uni.navigateBack({
						delta:1,
					})
				},10)
			},
			// 侧边导航点击处理函数
			setProvince(cityId) {
				this.indexsp = cityId
				// 将点击元素的索引赋值到变量indexsp中
				findCityByParentId({parentId:cityId}).then(res=>{
					this.city = res.data.data
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		position: fixed;
		bottom: 10rpx;
		width: 500rpx
	}

	.f08btn {
		background-color: #f08300 !important;
		color: #fff;
		font-size: 28rpx;
	}

	.city {
		width: 100%;

		&_title {
			margin-bottom: 60rpx;
		}

		&_item {
			padding-bottom: 20rpx;
			align-items: flex-start;

			&_left {
				width: 210rpx;
				display: inline-block;
				background: #fafafa;

				view {
					text-align: center;
					padding: 20rpx;
				}

				.active {
					color: #f08300;
					background: #fff;
				}
			}

			&_right {
				width: 500rpx;
				display: inline-block;
				padding-left: 20rpx;
				position: fixed;

				button {
					border: 1rpx solid #f6f6f6;
				}

				.current {
					padding: 20rpx 30rpx 0 0;
					// 当前城市样式
					.hot_title {
						width: 100%;
						display: inline-block;
						color: #bfbfbf;
						line-height: 1;
						vertical-align: middle;
						margin-bottom: 22rpx;
					}
					.flex1{
						color: orange;
						.data-v-57280228{
						}
						text{
							font-size: 14px;
						}
					}

					.icon {
						width: 30rpx;
						height: 35rpx;
						display: inline-block;
						vertical-align: middle;
					}

					view {
						
						justify-content: space-between;

						view {
							width: calc(100% - 40rpx);

							text {
								display: inline-block;
							}
						}
					}
				}

				.hot {
					button {
						color: #484848;
						min-width: calc(50% - 20rpx);
						height: 65rpx;
						background: #fff;
						padding: 0 12rpx;
						display: inline-block;
						font-size: 24rpx;
						margin: 18rpx 20rpx 0 0;
					}

					button:after {
						border-color: #eee;
					}

					.active {
						color: #f08300;
						border: 1rpx solid #f08300;
					}

					.active:after {
						border-color: #f08300;
					}

				}
			}
		}

	}
</style>

